<template>
<div class="header_down">
  <!-- 背景图片 -->
  <div class="bg"></div>

  <!-- 下载app -->
  <div class="register_app">
    <!-- 豆瓣标题 -->
    <p class="app_title">
      豆瓣
      <span>6.0</span>
    </p>
    <!-- 标语 -->
    <p class="app_slogan">
      <span>我们的精神角落</span>
    </p>
    <!-- 下载连接 -->
    <a href="#" class="link_app">下载豆瓣 App</a>
    <!-- 二维码（两个二维码） -->
    <div class="app_qr">
      <a href="#" class="app_qr_a">
        <img src="@/assets/images/icon_qrcode_green.png" alt="app_qr">
      </a>
      <div class="app_qr_expand">
        <img src="@/assets/images/doubanapp_qrcode.png" alt="" class="app_qrExpand">
        <p>iOS / Android 扫码直接下载</p>
      </div>
    </div>
  </div>
  <!-- 登陆 -->
  <div class="field">
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item label="">
          <el-input v-model="form.name" placeholder="邮箱/手机号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.name" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit">登录豆瓣</el-button>

        </el-form-item>
      </el-form>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      form: {

      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit')
    }
  }
}
</script>

<style lang="scss">
.header_down{
  position: relative;
  width: 100%;
  height: 180px;
  background-color: #edf4ed;
  .bg{
    position: absolute;
    width: 500px;
    height: 180px;
    background: url('../../assets/images/doubanapp5_bg.png') no-repeat;
    left: 130px;
  }
  .register_app{
     position: absolute;
    width: 566px;
    height: 180px;
    left: 130px;
    background:url('../../assets/images/doubanapp5.png') no-repeat;
    background-position: -20px -150px;
    .app_title{
      position: absolute;
      left: 414px;
      top:34px;
      font-size: 25px; /* 默认是medium */
      color: black;
      margin: 0;
      span{
        margin-left: 5px;
      }
    }
    .app_slogan{
      position: absolute;
      left: 414px;
      top:70px;
      margin: 0;
      font-size: 12px;
      letter-spacing: 2px; /* 字符间距，默认是0 */
    }
    .link_app{
      display: block;
      width: 115px;
      height: 25px;
      color: white;
      background-color: #00b51d;
      position: absolute;
      left: 414px;
      top: 105px;
      text-align: center; /*文本排列到中间 */
      font-size: 15px;
      padding-top: 5px;
    }
    .app_qr{
      .app_qr_a img{
        position: absolute;
        left: 535px;
        top: 105px;
        width: 28px;
        height: 28px;
        border: 1px solid #00b51d; /* border是三个属性的简写，分别是border-width：边框宽 ； border-style：边框风格，solid：实线 ；border-color：边框颜色*/
        border-radius: 2px; /* 给div添加圆角 */
      }
      .app_qr_expand{
        position: absolute;
        left: 535px;
        top: 105px;
        width: 160px;
        height: 180px;
        color: black; /* div 中的文字颜色 */
        padding:20px; /* 设置padding，会使div看上去宽和高变大20px */
        background-color: white;
        display: none; /* 默认隐藏 display:none和visible:hidden都能把网页上某个元素隐藏起来 区别是 display:none不占空间，后者虽然看不到，但占空间 */
        img{
          position: absolute;
          width: 160px;
          height: 160px;
        }
        p{
          position: absolute;
          top: 175px;
          color: #666;
          font-size: 13px;
          text-align: center;
        }
      }
    }
    .app_qr:hover .app_qr_expand{
      display: block;
      z-index: 2;
    }
  }
  .field{
    position:absolute;
    width: 270px;
    height: 130px;
    left: 1100px;
    z-index: 1;
    padding: 20px;
    .el-form{
      .el-form-item{
        margin-bottom: 5px;

        .el-form-item__content .el-input input{
          height: 33px;
          width: 280px;
        }
        .el-form-item__content button{
          width: 280px;
          height: 34px;
        }
      }

    }
  }
}

</style>
